<template>
  <div class="exampleitem-top">
    <NavHeader />
    <div class="exampleitem-top-content">
      <h1>渠道数据采集</h1>
      <!-- <h3>你的光芒闪耀于你对卓越的追求，与其模仿他人，不如塑造独特的自己。</h3> -->
    </div>
  </div>
  <div class="exampleitem-center">
    <div class="exampleitem-center-l">
      <h1>什么是渠道数据采集?</h1>
      <p>
        智能生成培训计划，课程一键下发，高效省力
        系统内置海量课程资源及配套试题库，随时调用
        签到、培训、考试、发证全程线上实施，合规高效
      </p>
    </div>
    <img src="@/assets/img/exampleitem/item.png" alt="" />
  </div>
  <div class="exampleitem-center">
    <img src="@/assets/img/exampleitem/item.png" alt="" />
    <div class="exampleitem-center-l">
      <h1>采集方式有哪些?</h1>
      <p>
        智能生成培训计划，课程一键下发，高效省力
        系统内置海量课程资源及配套试题库，随时调用
        签到、培训、考试、发证全程线上实施，合规高效
      </p>
    </div>
  </div>
  <div class="exampleitem-center">
    <div class="exampleitem-center-l">
      <h1>存在问题及解决方案?</h1>
      <p>
        智能生成培训计划，课程一键下发，高效省力
        系统内置海量课程资源及配套试题库，随时调用
        签到、培训、考试、发证全程线上实施，合规高效
      </p>
    </div>
    <img src="@/assets/img/exampleitem/item.png" alt="" />
  </div>
  <Recommend backColor="#f3f3f6" />
  <pageBottom backColor="#f3f3f6" />
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch } from "vue";
import NavHeader from "@/components/NavHeader.vue";
import pageBottom from "@/components/pageBottom.vue";
import Recommend from "@/components/Recommend.vue";
</script>
<style lang="scss" scoped>
.exampleitem-top {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("@/assets/img/exampleitem/bg.png");
  height: 100vh;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4784313725);
  }
  &-content {
    position: absolute;
    // margin-left: 18%;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
    h1 {
      margin-bottom: 20px;
    }
  }
}
.exampleitem-center {
  color: #000;
  padding: 50px;
  background-color: #f3f3f6;
  display: flex;
  &-l {
    padding: 60px 80px;
    p {
      color: #666;
    }
  }
}
</style>
